<template>
  <s-page custom-class="Slider-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-slider v-model="value" @change="onChange" />
      </c-demo-block>

      <c-demo-block title="双滑块">
        <s-slider v-model="rangeValue" @change="onChange" />
      </c-demo-block>

      <c-demo-block title="指定选择范围">
        <s-slider v-model="value3" :min="-50" :max="50" @change="onChange" />
      </c-demo-block>

      <c-demo-block title="指定步长">
        <s-slider v-model="value4" step="10" />
      </c-demo-block>

      <c-demo-block title="禁用">
        <s-slider v-model="value5" disabled />
      </c-demo-block>

      <c-demo-block title="自定义样式">
        <s-slider v-model="value6" bar-height="8" active-color="#ee0a24" @change="onChange" />
      </c-demo-block>

      <c-demo-block title="自定义按钮">
        <s-slider v-model="value7" bar-height="8" active-color="#ee0a24" @change="onChange">
          <template #button>
            <div class="custom-button">{{ value7 }}</div>
          </template>
        </s-slider>
      </c-demo-block>

      <c-demo-block title="自定义按钮">
        <s-slider v-model="rangeValue2" bar-height="8" active-color="#ee0a24" @change="onChange">
          <template #startButton>
            <div class="custom-button">{{ rangeValue2[0] }}</div>
          </template>
          <template #endButton>
            <div class="custom-button">{{ rangeValue2[1] }}</div>
          </template>
        </s-slider>
      </c-demo-block>

      <c-demo-block title="垂直方向">
        <view style="height: 300rpx; padding-left: 60rpx">
          <s-slider v-model="value8" vertical @change="onChange" />
          <s-slider v-model="rangeValue3" vertical custom-style="margin-left: 200rpx" @change="onChange" />
        </view>
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data() {
    return {
      value: 50,
      rangeValue: [10, 50],
      value2: 50,
      value3: 0,
      value4: 50,
      value5: 50,
      value6: 50,
      rangeValue2: [10, 50],
      value7: 50,
      rangeValue3: [10, 50],
      value8: 50,
    };
  },
  methods: {
    onChange(value) {
      // console.log(value);
      uni.showToast({
        mask: false,
        title: `当前值：${value}`,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  // background-color: $white;
}
.Slider-Page {
  ::v-deep {
    .c-demo-block {
      padding-bottom: 80rpx;
    }
  }
  .container {
    padding: 0 $padding-md;
  }
  .custom-button {
    width: 52rpx;
    color: #fff;
    font-size: 20rpx;
    line-height: 36rpx;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 200rpx;
  }
}
</style>
